<template>
    <MyDialog :mode="props.mode" title="Repair order part SW Version" :submit="submitFn">
        <div class="q-gutter-md q-pa-md">
            <q-input  v-model="state.data.stock_code" type="text" label="Stock Code" 
            class="input-css" borderless
            :readonly="true" />
            <q-input  v-model="state.data.repair_order_part.serial_no" type="text" label="Serial No" 
            class="input-css" borderless
            :readonly="true" />
            <q-input  v-model="state.data.sw_ver" label="Software Version" type="text" 
            class="input-css" borderless
            v-if="props.version=='sw'"/>
            <q-input  v-model="state.data.hw_ver" label="Hardware Version" type="text" 
            class="input-css" borderless
            v-if="props.version=='hw'"/>
        </div>
    </MyDialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { RepairOrderPartVersion } from 'src/services/type'
import { useQuasar } from 'quasar'
import ROPVService from 'src/services/repairOrderPartVersionService'
import MyDialog from '../container/MyDialog.vue'
import { color } from 'echarts/core'

export interface FormProp {
    id: number
    // mode: 'create' | 'edit'
    mode: 'edit'
    version:'sw'|'hw'
    closeable: boolean
}

const emit = defineEmits(['submit', 'close'])

const $q = useQuasar()

const props = withDefaults(defineProps<FormProp>(), {
    mode: 'edit',
    version:'sw',
    closeable: true
})

const state = reactive<{
    data: RepairOrderPartVersion
}>({
    data:{
        id: 0,
        stock_code: '',
        sw_ver: '',
        hw_ver: '',
        update: '',
        repair_order: 0,
        repair_order_part: {
            id: 0,
            stock_code: '',
            outer_inner: '',
            serial_no: '',
            system: '',
            description: '',
            date_code: '',
            sw_ver: '',
            hw_ver: '',
            fitment: '',
            last_check_in: '',
            last_check_out: '',
            sequence: 0,
            qr_code: '',
            status: '',
            status_details: '',
            io_counter: '',
            detail_description: '',
            deliver_to: '',
            repair_order: 0,
            parent_part: 0
            }
    }
})

async function initData() {
    if (props.id && props.id>0 && props.mode == 'edit') {
        state.data = await ROPVService.get(props.id)
    }
}

// async function create() {
//     const data: Partial<RepairOrderPartVersion> = { ...state.data }

//     delete data.id
//     delete data.update

//     const createRes = await createVersion(data)

//     if (createRes) {
//         $q.notify({
//             color: 'positive',
//             message: 'Created',
//             icon: 'check',
//         })
//         emit('submit')
//         emit('close')
//     }
// }

async function edit() {
    if (state.data.repair_order_part.serial_no==''){
        $q.notify({
            message: 'Please fit the part first',
            color:'negative'
        })
        return
    }
    if (props.id) {
        const data:Partial<RepairOrderPartVersion> = {}
        if (props.version == 'sw') {
            data['sw_ver'] = state.data.sw_ver
        } else {
            data['hw_ver'] = state.data.hw_ver
        }
        const res = await ROPVService.patch(props.id, data)
        if (res) {
            emit('submit')
            emit('close')
        }
    }
    return
}

function submitFn() {
    // if (props.mode == 'create') {
    //     return 
    // } else {
    //     edit()
    // }
    edit()
}

function closeFn() {
    emit('close')
}


onMounted(() => {
    initData()
})

</script>

<style scoped>
.cap {
    text-transform: capitalize;
}
.upper{
    text-transform: uppercase;
}
</style>